<template>

  <popup :title="title" @confirm="handleSubmit" ref="popupRef">

    <el-form :model="formData" :rules="rules" ref="formRef" label-width="15%">

      <el-form-item label="父级菜单" prop="pid">
        <el-tree-select
            v-model="formData.pid"
            :data="menuData"
            check-strictly
            :render-after-expand="false"
        />
      </el-form-item>

      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
          <el-radio :label="3">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="名称" prop="name">
        <el-input
            class="ls-input"
            v-model="formData.name"
            placeholder="请输入名称"
            clearable
        />
      </el-form-item>

      <el-form-item label="图标" prop="icon" v-if="formData.type !== 3">
        <el-input
            class="ls-input"
            v-model="formData.icon"
            placeholder="请选择图标"
            clearable
            @click="iconShow = !iconShow"
        >
          <template #prepend>
            <el-button :icon="formData.icon"/>
          </template>
        </el-input>
        <div v-if="iconShow">
          <el-scrollbar height="100px">
            <i class="el-icon" v-for="icon in icons" style="font-size: large;margin-right: 5px;cursor: pointer;">
              <component :is="icon" @click="formData.icon = icon"/>
            </i>
          </el-scrollbar>
        </div>
      </el-form-item>

      <el-form-item label="路由地址" prop="paths" v-if="formData.type !== 3">
        <el-input
            class="ls-input"
            v-model="formData.paths"
            placeholder="请输入路由地址"
            clearable
        />
        <div class="form-tips">
          访问的路由地址，如：`/user/list`，如外网地址需内链访问则以`http(s)://`开头
        </div>
      </el-form-item>

      <el-form-item label="组件" prop="component" v-if="formData.type === 2">
        <el-input
            class="ls-input"
            v-model="formData.component"
            placeholder="请输入组件"
            clearable
        >
          <template #prepend>src/views/</template>
          <template #append>.vue</template>
        </el-input>
        <div class="form-tips">
          访问的组件路径，如：`user/list`
        </div>
      </el-form-item>

      <el-form-item label="权限标识" prop="perms">
        <el-input
            class="ls-input"
            v-model="formData.perms"
            placeholder="请输入权限标识"
            clearable
        />
        <div class="form-tips">
          将作为server端API验权使用，如`user.list`，请谨慎修改
        </div>
      </el-form-item>

      <el-form-item label="显示" prop="is_show" v-if="formData.type !== 3">
        <div>
          <el-radio-group v-model="formData.is_show">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <div class="form-tips">
            不显示则路由将不会出现在侧边栏，但仍然可以访问
          </div>
        </div>
      </el-form-item>

      <el-form-item label="状态" prop="is_disable" v-if="formData.type !== 3">
        <div>
          <el-radio-group v-model="formData.is_disable">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
          <div class="form-tips">
            停用则路由将不会出现在侧边栏，也不能被访问
          </div>
        </div>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <div>
          <el-input-number v-model="formData.sort" :min="0" :max="10000"/>
          <div class="form-tips">
            数值越大越排后
          </div>
        </div>
      </el-form-item>

      <el-form-item label="备注" prop="memo">
        <el-input
            v-model="formData.memo"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit
        />
      </el-form-item>

    </el-form>

  </popup>

</template>

<script setup>
import popup from '@/components/popup/index.vue'
import {onMounted, reactive, ref, shallowRef} from "vue";
import {list, add, edit} from '@/api/menu'
import FormInstance from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const icons = ref([])
const iconShow = ref(false)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  icons.value.push(key)
}

const formRef = shallowRef(FormInstance)
const popupRef = shallowRef(popup)
const emit = defineEmits(['success'])

const menuData = ref([{'value': 0, 'label': '无'}])
const title = ref('edit')
const formData = reactive({
  id: 0,
  pid: 0,
  type: 1,
  name: '',
  icon: '',
  paths: '',
  component: '',
  perms: '',
  is_show: 1,
  is_disable: 0,
  sort: 0,
  memo: ''
})

const rules = reactive({
  type: [
    {required: true, message: '请选择类型', trigger: 'blur'},
  ],
  pid: [
    {required: true, message: '请选择父级菜单', trigger: 'blur'},
  ],
  name: [
    {required: true, message: '请输入名称', trigger: 'blur'},
  ],
})

const handleSubmit = async () => {
  await formRef.value?.validate()
  title.value === 'edit' ? await edit(formData) : await add(formData)
  emit('success')
}

const setFormData = async (data = {}, name = 'add') => {
  title.value = name

  if (Object.keys(data).length > 0) {
    for (const key in formData) {
      if (data[key] !== null && data[key] !== undefined) {
        formData[key] = data[key]
      }
    }
  }
}

onMounted(() => {
  list({all: 0}).then((data) => {
    menuData.value = data.list
  })
})

defineExpose({
  setFormData
})

</script>

<style scoped>

</style>